<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%"></div>
    <!-- 3d消息弹窗 -->
    <cesiumMsgbox
      v-for="item in msgboxarr"
      :diahtml="item.diahtml"
      :options="item.options"
      :key="item.uid"
    />
  </div>
</template>

<script>
import scene from "./scene.json";
// import geo from '/zz.json'
import axios from "axios";
import cesiummixins from "@/mixins/bigScreen/threeDimensional/cesiumMixins";

import gongre from "../mixins/3d/geojson/3dgongre";
import nengxiao from "../mixins/3d/geojson/3dnengxiao";

// 1 创建Earth的vue组件
export default {
  components: {
    // efficcom
  },
  mixins: [cesiummixins, gongre, nengxiao],
  data() {
    return {
      //地球
      _earth: undefined,
      _viewer: undefined,
      //geojson数据源
      ds: [],
      //照相机高度
      camheight: 0,
      //3d消息弹窗
      msgboxarr: [],
      //pin id数组
      pinarr: []
    };
  },
  // 1.1 资源创建
  mounted() {
    if (typeof XE !== "undefined") {
      this.createEarth(this);
    } else if (typeof Cesium !== "undefined") {
      this.createCesium(this);
    }
    this.loadData();
    this.$root._earth.camera.flyTo(
      [(113.6478 * Math.PI) / 180, (34.7456 * Math.PI) / 180, 100],
      100000,
      [(0 * Math.PI) / 180, (-90 * Math.PI) / 180, 0],
      0.1
    );
  },

  watch: {
    "$store.state.daping.scencetype": {
      handler: function(n, o) {
        //清空数据
        this.destoryds();
        //加载数据
        switch (n) {
          case "nengxiao":
            this.nengxiao();
            break;
          case "gongre":
            this.gongre();
            break;
          default:
            break;
        }
      }
      // immediate: true,
    }
  },

  methods: {
    loadData() {
      let _this = this;

      //加载场景
      this._earth.xbsjFromJSON(scene);
      this.$root._earth = this._earth;
      // this._earth

      //加载FPS调试
      this._viewer.scene.debugShowFramesPerSecond = true;
      //加载初始化3d元素
      // this.$store.state.daping.scencetype = "nengxiao";
      // this.$store.state.daping.scencetype = "gongre";
      //添加zoom监听
      this._viewer.scene.camera.moveEnd.addEventListener(this.zoomed);
      // this._viewer.scene.camera.moveEnd.addEventListener(function(_this) {
      //   //设置zoom高度

      // });
    },

    zoomed() {
      let _this = this;
      this.camheight = Math.ceil(
        this._viewer.camera.positionCartographic.height
      );
    },

    destoryds() {
      let _this = this;

      //清理geojson数据
      if (this.ds.length != 0) {
        for (let index1 = 0; index1 < this.ds.length; index1++) {
          for (
            let index = 0;
            index < this._viewer.dataSources.length;
            index++
          ) {
            if (this.ds[index1] == this._viewer.dataSources.get(index)._name) {
              this._viewer.dataSources.remove(
                this._viewer.dataSources.get(index)
              );
            }
          }
        }
      }
      //清理EarthSDK点
      let pinarr = this.pinarr;
      pinarr.map(item => {
        this._earth.sceneTree.root.children.map((eactpin, index) => {
          if (eactpin.ref == item) {
            this._earth.sceneTree.root.children.splice(index, 1);
          }
        });
      });

      // let pinarr = this.pinarr
      // let earthchild = _.cloneDeep(this._earth.sceneTree.root.children);
      // pinarr.map(item => {
      //   earthchild.map((eactpin,index) =>{
      //     if (eactpin.ref == item) {
      //       this._earth.sceneTree.root.children.splice(index, 1);
      //       // this._earth.sceneTree.$refs[item].destroy()
      //     }
      //   })
      // })

      //清理msgbox
      this.msgboxarr = [];

      this.ds = [];
    },

    createEarth(comp) {
      //创建地球
      let earth = new XE.Earth(comp.$refs.earthContainer);
      this._earth = earth;
      this._viewer = earth.czm.viewer;
    },
    createCesium(comp) {
      window.viewer = new Cesium.Viewer(comp.$refs.earthContainer);
    }
  },

  // 1.2 资源销毁
  beforeDestroy() {
    // vue程序销毁时，需要清理相关资源
    this._earth = this._earth && this._earth.destroy();
  }
};
</script>

<style lang="scss">
.cesiumdialog {
  position: absolute;
  width: 180px;
  min-height: 200px;
  color: white;
  background-image: url("/configuration/cesium/dialog.png");
  background-size: 100% 100%;
  padding: 5px;
  border-radius: 5px;
  // cursor: pointer;
}
.cesium-performanceDisplay {
  position: absolute;
  top: 50%;
  left: -1000px;
}
</style>